<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <link href="css/mdui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link href = “https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css"  rel = ”stylesheet“ >
</head>
<body class="mdui-bottom-nav-fixed mdui-drawer-body-left mdui-bottom-nav-fixed">

<!--顶部导航栏-->
<div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <!--绑定侧边栏事件-->
        <a class="mdui-btn mdui-btn-icon" href="javascript:" mdui-drawer="{target: '#left-drawer'}"><i
                class="mdui-icon material-icons">menu</i></a>

        <a class="mdui-typo-headline" href="javascript:">The Blog Of SpringWaterLikeMe</a>
        <div class="mdui-toolbar-spacer"></div>
        <a class="mdui-btn mdui-btn-icon" href="javascript:onclick(window.location.reload())" ><i class="mdui-icon material-icons">refresh</i></a>
        <a class="mdui-btn mdui-btn-icon" href="javascript:" mdui-dialog="{target: '#shareButton'}"><i class="mdui-icon material-icons">share</i></a>
        <button onclick="window.location.href='login.html'" class="mdui-btn mdui-color-theme-accent mdui-ripple">登录</button>
        <button onclick="window.location.href='register.html'" class="mdui-btn mdui-ripple">注册</button>
    </div>
</div>

<!--侧边栏-->
<div class="mdui-drawer" id="left-drawer">
    <ul class="mdui-list">
        <div class="mdui-card">
            <div class="mdui-card-media">
                <div class="color_card_mask mdui-color-theme "></div>
                <img src="image/MainSection.png">
                <div class="mdui-card-media-covered">
                    <div class="mdui-card-primary">
                        <div class="mdui-card-primary-title">流水吾情</div>
                        <div class="mdui-card-primary-subtitle">苦逼大一狗</div>
                    </div>
                </div>
            </div>
        </div>
        <li class="mdui-list-item mdui-ripple mdui-m-t-1">
            <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
            <div class="mdui-list-item-content">主页</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">contacts</i>
            <div class="mdui-list-item-content">关于</div>
        </li>
        <li class="mdui-subheader">科技</li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">video_library</i>
            <div class="mdui-list-item-content">视频</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">book</i>
            <div class="mdui-list-item-content">文章</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">linked_camera</i>
            <div class="mdui-list-item-content">摄影</div>
        </li>
        <li class="mdui-subheader">开发</li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">note</i>
            <div class="mdui-list-item-content">随笔</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">computer</i>
            <div class="mdui-list-item-content">项目展示</div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">layers</i>
            <div class="mdui-list-item-content">开源库</div>
        </li>
    </ul>
</div>


<!--背景图片  ： 沉浸系统-->
<div class="bgCarouselMaks" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.5;background-color: black;z-index: -1"></div>
<div id="bgCarousel" style="z-index: -2">
    <img src="image/bgPic/red.jpg">
    <img src="image/bgPic/pink.jpg">
    <img src="image/bgPic/purple.jpg">
    <img src="image/bgPic/indigo.jpg">
    <img src="image/bgPic/blue.jpg">
    <img src="image/bgPic/light-blue.jpg">
    <img src="image/bgPic/cyan.jpg">
    <img src="image/bgPic/teal.jpg">
    <img src="image/bgPic/green.jpg">
    <img src="image/bgPic/light-green.jpg">
    <img src="image/bgPic/lime.jpg">
    <img src="image/bgPic/yellow.jpg">
    <img src="image/bgPic/orange.jpg">
    <img src="image/bgPic/deep-orange.jpg">
    <img src="image/bgPic/brown.jpg">
    <img src="image/bgPic/grey.jpg">
    <img src="image/bgPic/blue-grey.jpg">
    <img src="image/bgPic/default.jpg">
</div>




<!--主体内容-->
<div class="mdui-container">
    <div class="card-blank"></div>
    <div class="mdui-text-color-theme mdui-typo page-title mdui-m-l-2 mdui-p-t-1">
        <h1>视频</h1>
    </div>


<!--    视频列表-->
    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3" id="mdui-card-video-1">


        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="image/article1-author.jpg"/>
            <div class="mdui-card-header-title">流水吾情</div>
            <div class="mdui-card-header-subtitle">计算机专业科技爱好者，加QQ群：724456706</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <div class="video-load-img">
                <img src="image/video1_pic1.png" class="card-title-head-photo"/>
                <button  id="video_button_play" class="mdui-fab mdui-ripple mdui-text-color-grey-500 video_button_play" ><i class="mdui-icon material-icons mdui-center mdui-valign">play_arrow</i></button>
                <div class="mdui-video-container">
                    <iframe src="http://player.bilibili.com/player.html?aid=24493376&cid=41136449&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                </div>
            </div>


            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
                        class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary mdui-p-t-3">
            <div class="mdui-card-primary-title">【开箱】美帝良心想？联想Ideapad720s超级本开箱上手体验</div>
            <div class="mdui-card-primary-subtitle">科技评测</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content ">由于是在亲戚家临时录的，效果一般请见谅。
            BGM：Stay-Zedd/Alessia Cara
            All Falls Down-Alan Walker/Digital Farm Animals/Noah Cyrus
            There For You-Martin Garrix/Troye Sivan
        </div>
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple mdui-text-color-theme">点击观看</button>
        </div>
    </div>

    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3">

        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="avatar.jpg"/>
            <div class="mdui-card-header-title">Title</div>
            <div class="mdui-card-header-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <img src="image/default-card-pic.jpg"/>

            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary">
            <div class="mdui-card-primary-title">Title</div>
            <div class="mdui-card-primary-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

        <!-- 卡片的按钮 -->
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple">action 1</button>
            <button class="mdui-btn mdui-ripple">action 2</button>
            <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
        </div>

    </div>
    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3">

        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="avatar.jpg"/>
            <div class="mdui-card-header-title">Title</div>
            <div class="mdui-card-header-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <img src="image/default-card-pic.jpg"/>

            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary">
            <div class="mdui-card-primary-title">Title</div>
            <div class="mdui-card-primary-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

        <!-- 卡片的按钮 -->
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple">action 1</button>
            <button class="mdui-btn mdui-ripple">action 2</button>
            <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
        </div>

    </div>
    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3">

        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="avatar.jpg"/>
            <div class="mdui-card-header-title">Title</div>
            <div class="mdui-card-header-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <img src="image/default-card-pic.jpg"/>

            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary">
            <div class="mdui-card-primary-title">Title</div>
            <div class="mdui-card-primary-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

        <!-- 卡片的按钮 -->
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple">action 1</button>
            <button class="mdui-btn mdui-ripple">action 2</button>
            <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
        </div>

    </div>
    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3">

        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="avatar.jpg"/>
            <div class="mdui-card-header-title">Title</div>
            <div class="mdui-card-header-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <img src="image/default-card-pic.jpg"/>

            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary">
            <div class="mdui-card-primary-title">Title</div>
            <div class="mdui-card-primary-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

        <!-- 卡片的按钮 -->
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple">action 1</button>
            <button class="mdui-btn mdui-ripple">action 2</button>
            <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
        </div>

    </div>
    <div class="mdui-card mdui-col-xs-12 mdui-col-lg-5 mdui-col-md-5 mdui-col-lg-5 mdui-col-xl-5 mdui-m-b-5 mdui-m-r-3">

        <!-- 卡片头部，包含头像、标题、副标题 -->
        <div class="mdui-card-header">
            <img class="mdui-card-header-avatar" src="avatar.jpg"/>
            <div class="mdui-card-header-title">Title</div>
            <div class="mdui-card-header-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
        <div class="mdui-card-media">
            <img src="image/default-card-pic.jpg"/>

            <!-- 卡片中可以包含一个或多个菜单按钮 -->
            <div class="mdui-card-menu">
                <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons">share</i></button>
            </div>
        </div>

        <!-- 卡片的标题和副标题 -->
        <div class="mdui-card-primary">
            <div class="mdui-card-primary-title">Title</div>
            <div class="mdui-card-primary-subtitle">Subtitle</div>
        </div>

        <!-- 卡片的内容 -->
        <div class="mdui-card-content">子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」</div>

        <!-- 卡片的按钮 -->
        <div class="mdui-card-actions">
            <button class="mdui-btn mdui-ripple">action 1</button>
            <button class="mdui-btn mdui-ripple">action 2</button>
            <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button>
        </div>

    </div>

    <!--    分享弹窗-->
    <div class="mdui-dialog" id="shareButton">
        <div class="mdui-dialog-title">请您复制到剪切板后手动发送</div>
        <div class="mdui-dialog-content" id="printLocation"></div>
        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" mdui-dialog-close>确定</button>
            <button class="mdui-btn mdui-ripple" mdui-dialog-confirm onclick="CopyLocation()">复制到剪切板</button>
        </div>
    </div>

</div>

<!--底部向上-->
<div class="mdui-fab mdui-radio mdui-fab-fixed mdui-color-theme-accent" id="btn">
    <i class="mdui-icon material-icons">arrow_upward</i>
</div>
<script src="js/jquery-3.4.0.min.js"></script>
<script src="js/mdui.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script src="js/returnTop.js"></script>
<script src="js/main.js"></script>
<script>

</script>
</body>
</html>
